<?php
/**
 * 轮播图片状态功能测试
 * 测试文件存放于 public/test/slider_status_test.php
 */

// 记录请求日志
file_put_contents(__DIR__ . '/slider_test.log', date('Y-m-d H:i:s') . " - 访问测试文件\n", FILE_APPEND);

// 模拟一些测试数据
$test_images = [
    [
        'title' => '测试图片1',
        'href' => 'https://example.com/1',
        'src' => '/uploads/20250923/9219768ce910c8fba62d7d5bc221a67c.png',
        'status' => '1'
    ],
    [
        'title' => '测试图片2', 
        'href' => 'https://example.com/2',
        'src' => '/uploads/20250923/abcdef1234567890.png',
        'status' => '0'
    ]
];

// 处理POST请求（模拟保存）
if ($_POST) {
    file_put_contents(__DIR__ . '/slider_test.log', date('Y-m-d H:i:s') . " - POST数据: " . json_encode($_POST, JSON_UNESCAPED_UNICODE) . "\n", FILE_APPEND);
    
    $result = [
        'code' => 1,
        'msg' => '保存成功',
        'data' => $_POST
    ];
    
    header('Content-Type: application/json');
    echo json_encode($result, JSON_UNESCAPED_UNICODE);
    exit;
}

// 处理GET请求（模拟加载数据）
if ($_GET['action'] == 'load') {
    $result = [
        'code' => 1,
        'msg' => '加载成功',
        'data' => ['image' => json_encode($test_images, JSON_UNESCAPED_UNICODE)]
    ];
    
    header('Content-Type: application/json');
    echo json_encode($result, JSON_UNESCAPED_UNICODE);
    exit;
}
?>

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>轮播图片状态功能测试</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <style>
        body { padding: 20px; }
        .test-section { 
            background: #f5f5f5; 
            padding: 20px; 
            margin: 20px 0; 
            border-radius: 5px; 
            border: 1px solid #ddd; 
        }
        .image-group {
            background: white;
            padding: 15px;
            margin: 10px 0;
            border-radius: 5px;
            border: 1px solid #ccc;
        }
        .status-display {
            margin: 10px 0;
            padding: 10px;
            background: #e8f4f8;
            border-radius: 3px;
            font-family: monospace;
        }
        .btn-switcher {
            display: inline-block;
            cursor: pointer;
            margin: 0 10px;
        }
        .btn-switcher.active { color: #5cb85c; }
        .btn-switcher.text-gray { color: #999; }
        .btn-switcher i { transition: all 0.3s ease; }
    </style>
</head>
<body>
    <div class="container">
        <h1>轮播图片状态功能测试</h1>
        
        <div class="test-section">
            <h3>功能说明</h3>
            <p>本测试验证轮播图片的开启/禁用功能是否正常工作：</p>
            <ul>
                <li>✅ 每个图片都有状态开关</li>
                <li>✅ 点击开关可以切换状态（1=开启，0=禁用）</li>
                <li>✅ 状态变化会实时更新到JSON数据中</li>
                <li>✅ JSON数据格式符合要求</li>
            </ul>
        </div>

        <div class="test-section">
            <h3>模拟轮播图片设置</h3>
            <div id="image-container">
                <!-- 图片组将在这里动态生成 -->
            </div>
            
            <div class="text-center" style="margin-top: 15px;">
                <button type="button" id="add-image" class="btn btn-success">
                    <i class="fa fa-plus"></i> 添加图片
                </button>
            </div>
        </div>

        <div class="test-section">
            <h3>当前JSON数据</h3>
            <div id="json-display" class="status-display">
                加载中...
            </div>
        </div>

        <div class="test-section">
            <h3>测试结果</h3>
            <div id="test-results">
                <p>请进行以下测试：</p>
                <ol>
                    <li>点击开关按钮，观察状态变化</li>
                    <li>检查JSON数据是否正确更新</li>
                    <li>添加新图片，验证默认状态</li>
                </ol>
            </div>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        let imageIndex = 0;
        
        // 初始化页面
        function initPage() {
            // 加载初始数据
            loadInitialData();
            
            // 绑定添加图片按钮
            $('#add-image').click(function() {
                addNewImage();
            });
        }
        
        // 加载初始数据
        function loadInitialData() {
            $.get('?action=load', function(response) {
                if (response.code == 1 && response.data.image) {
                    try {
                        const images = JSON.parse(response.data.image);
                        images.forEach((img, index) => {
                            createImageGroup(img, index);
                        });
                        imageIndex = images.length;
                        updateJsonDisplay();
                    } catch(e) {
                        console.error('解析图片数据失败:', e);
                        addNewImage(); // 添加一个默认图片
                    }
                } else {
                    addNewImage(); // 添加一个默认图片
                }
            }).fail(function() {
                addNewImage(); // 添加一个默认图片
            });
        }
        
        // 创建图片组
        function createImageGroup(data, index) {
            const html = `
                <div class="image-group" data-index="${index}">
                    <div class="row">
                        <div class="col-md-3">
                            <div class="form-group">
                                <label>标题:</label>
                                <input type="text" name="images[${index}][title]" class="form-control" value="${data.title || ''}" placeholder="图片标题">
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group">
                                <label>链接:</label>
                                <input type="text" name="images[${index}][href]" class="form-control" value="${data.href || ''}" placeholder="链接地址">
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group">
                                <label>图片地址:</label>
                                <input type="text" name="images[${index}][src]" class="form-control" value="${data.src || ''}" placeholder="图片地址">
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group">
                                <label>状态:</label>
                                <div style="display: flex; align-items: center;">
                                    <input type="hidden" id="images-${index}-status" name="images[${index}][status]" class="image-status-input" value="${data.status || '1'}">
                                    <a href="javascript:;" data-toggle="switcher" class="btn-switcher ${data.status !== '0' ? 'active' : 'text-gray'}" data-input-id="images-${index}-status" data-yes="1" data-no="0">
                                        <i class="fa fa-toggle-on fa-2x ${data.status === '0' ? 'fa-flip-horizontal' : ''}"></i>
                                    </a>
                                    <div data-favisible="switch=1" class="p-3" style="margin-left: 10px; font-size: 12px; ${data.status === '0' ? 'display:none;' : ''}">开启</div>
                                    <div data-favisible="switch=0" class="p-3" style="margin-left: 10px; font-size: 12px; ${data.status !== '0' ? 'display:none;' : ''}">禁用</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            `;
            
            $('#image-container').append(html);
            
            // 初始化状态开关
            initStatusSwitch($('.image-group').last());
            
            // 绑定输入变更事件
            $('.image-group').last().find('input').on('change', function() {
                updateJsonDisplay();
            });
        }
        
        // 初始化状态开关
        function initStatusSwitch($group) {
            const $switcher = $group.find('.btn-switcher');
            const $statusInput = $group.find('.image-status-input');
            
            $switcher.on('click', function() {
                const $this = $(this);
                const inputId = $this.data('input-id');
                const $input = $('#' + inputId);
                const yes = $this.data('yes');
                const no = $this.data('no');
                
                if ($this.hasClass('active')) {
                    // 当前是开启状态，切换为禁用
                    $this.removeClass('active').addClass('text-gray');
                    $this.find('i').addClass('fa-flip-horizontal');
                    $input.val(no);
                    $statusInput.val(no);
                } else {
                    // 当前是禁用状态，切换为开启
                    $this.removeClass('text-gray').addClass('active');
                    $this.find('i').removeClass('fa-flip-horizontal');
                    $input.val(yes);
                    $statusInput.val(yes);
                }
                
                // 更新显示状态文本
                $group.find('[data-favisible]').hide();
                $group.find('[data-favisible="switch=' + $input.val() + '"]').show();
                
                // 更新JSON数据
                updateJsonDisplay();
                
                // 记录测试日志
                logTest('状态切换: 图片索引 ' + $group.data('index') + ' 状态变为 ' + $input.val());
            });
        }
        
        // 添加新图片
        function addNewImage() {
            const newImage = {
                title: '新图片 ' + (imageIndex + 1),
                href: '#',
                src: '/uploads/test' + (imageIndex + 1) + '.jpg',
                status: '1' // 默认开启
            };
            
            createImageGroup(newImage, imageIndex);
            imageIndex++;
            updateJsonDisplay();
            
            logTest('添加新图片: 索引 ' + (imageIndex - 1));
        }
        
        // 更新JSON显示
        function updateJsonDisplay() {
            const images = [];
            $('.image-group').each(function() {
                const $group = $(this);
                const title = $group.find('input[name*="[title]"]').val() || '';
                const href = $group.find('input[name*="[href]"]').val() || '';
                const src = $group.find('input[name*="[src]"]').val() || '';
                const status = $group.find('input[name*="[status]"]').val() || '1';
                
                if (title || href || src) {
                    images.push({
                        title: title,
                        href: href,
                        src: src,
                        status: status
                    });
                }
            });
            
            $('#json-display').text(JSON.stringify(images, null, 2));
        }
        
        // 记录测试日志
        function logTest(message) {
            const timestamp = new Date().toLocaleTimeString();
            $('#test-results').append('<div style="margin: 5px 0; padding: 5px; background: #f0f0f0; border-radius: 3px;">[' + timestamp + '] ' + message + '</div>');
        }
        
        // 页面初始化
        $(document).ready(function() {
            initPage();
            logTest('测试页面加载完成');
        });
    </script>
</body>
</html>